<template>
  <div class="login-main">
    <div class="login-main-title">
      后台管理系统
    </div>
    <div class="login-main-username login-main-input">
      <el-input v-model="loginInfo.userName" placeholder="请输入账号" :prefix-icon="UserFilled" />
    </div>
    <div class="login-main-password login-main-input">
      <el-input type="password" v-model="loginInfo.password" placeholder="请输入密码" :prefix-icon="Lock" />
    </div>
    <div class="login-main-code login-main-input">
      <el-input type="text" v-model="loginInfo.code" placeholder="请输入验证码" :prefix-icon="WarningFilled" />
      <div class="login-main-codeImg">
        <img
          src="" />
      </div>
    </div>
    <div class="login-main-button">
      <el-button type="primary">登陆</el-button>
    </div>
  </div>
</template>

<script setup>
import {
  UserFilled,
  WarningFilled,
  Lock,
} from '@element-plus/icons-vue'
import { login } from '@/api/auth'
import { lStorage } from '@/utils/cache'
import { setToken } from '@/utils/token'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const title = import.meta.env.VITE_APP_TITLE

const router = useRouter()

const loginInfo = ref({
  userName: '',
  password: '',
  code:''
})

initLoginInfo()

function initLoginInfo() {
  const localLoginInfo = lStorage.get('loginInfo')
  if (localLoginInfo) {
    loginInfo.value.name = localLoginInfo.name || ''
    loginInfo.value.password = localLoginInfo.password || ''
  }
}

const isRemember = ref(false)
async function handleLogin() {
  const { name, password } = loginInfo.value
  if (!name || !password) {
    $message.warning('请输入用户名和密码')
    return
  }
  try {
    const res = await login({ name, password: password.toString() })
    if (res.code === 0) {
      $message.success('登录成功')
      setToken(res.data.token)
      if (isRemember.value) {
        lStorage.set('loginInfo', { name, password })
      } else {
        lStorage.remove('loginInfo')
      }
      router.push('/')
    } else {
      $message.warning(res.message)
    }
  } catch (error) {
    $message.error(error.message)
  }
}
</script>

<style lang="scss">
.login-main {
  -webkit-tap-highlight-color: transparent;
  font-family: "Microsoft YaHei";
  font-size: .28em;
  line-height: 1;
  color: #333;
  width: 300px;
  height: auto;
  overflow: hidden;
  margin: 10% auto 0 auto;
  padding: 40px;
  box-shadow: 0 -15px 30px #0d957a;
  border-radius: 5px;

  .login-main-title {
    -webkit-tap-highlight-color: transparent;
    font-family: "Microsoft YaHei";
    line-height: 1;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #45bda6;
    text-shadow: 0 0 1px #0e947a;
    margin-bottom: 15px;
  }

  .login-main-input {
    -webkit-tap-highlight-color: transparent;
    font-family: "Microsoft YaHei";
    font-size: .28em;
    line-height: 1;
    color: #333;
    margin: 5px 0;
    height: 42px;
    overflow: hidden;
    position: relative;
  }

  .login-main-code {
    display: flex;
    .el-input {
      width: 180px;
    }
    .login-main-codeImg{
      width: 120px;
      text-align: center;
    }
  }

  .login-main-button{
    button {
      width: 100%;
      margin: 10px 0;
      height: 40px;
    }
  }


}
</style>
